<!--
 * @Author: XY
 * @Date: 2023-11-09 16:20:14
 * @LastEditors: fleeting-ln 3518413017@qq.com
 * @LastEditTime: 2023-12-17 15:12:18
 * @FilePath: \friendsApp\see_you\src\App.vue
 -->
<template>
  <div id="app">
    <van-nav-bar v-if="isshow" fixed :title="barTtile || ''" left-text="返回" left-arrow @click-left="onClickLeft"
      id="navbar">
      <template #left>
        <img src="@/assets/iconIndex/nav_back-border.png" alt="" style="margin-right: 10px" />
      </template>
      <template #right v-if="this.$route.meta.isRight == true">
        <img src="@/assets/iconIndex/nav_share-border.png" alt="" style="margin-right: 10px"
          @click="goPage('/invitation')" />
        <img v-if="$route.query.id && $route.query.id != $store.state.userInfo.uid"
          src="@/assets/iconIndex/nav_more-border.png" alt="" @click="goPage('/settingPage/inform')" />
      </template>
    </van-nav-bar>
    <!-- 页面缓存 -->
    <KeepAlive>
      <router-view v-if="this.$route.meta.keepAlive" />
    </KeepAlive>
    <router-view v-if="!this.$route.meta.keepAlive" />

    <van-tabbar id="tabbar" v-model="active" v-if="istabbar">
      <van-tabbar-item replace to="/index" icon="home-o">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active
            ? require('@/assets/iconIndex/home-lh.png')
            : require('@/assets/iconIndex/home.png')
            " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/piazza" icon="home-o">
        <span>广场</span>
        <template #icon="props">
          <img :src="props.active
            ? require('@/assets/iconIndex/piazza-lh.png')
            : require('@/assets/iconIndex/piazza.png')
            " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/chat/list" icon="home-o">
        <span>消息</span>
        <template #icon="props">
          <img :src="props.active
            ? require('@/assets/iconIndex/news-lh.png')
            : require('@/assets/iconIndex/news.png')
            " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="home-o">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active
            ? require('@/assets/iconIndex/me-lh.png')
            : require('@/assets/iconIndex/me.png')
            " />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { generateUUID } from '@/utils/fun'
import Cookies from 'js-cookie'
import { location } from '@/utils/getLocation'
// import { conn } from '@/utils/WebIM'
import { enterim } from '@/api/index'
export default {
  name: 'app',

  data() {
    return {
      active: 0,
      bar: {},
    }
  },

  computed: {
    barTtile() {
      return this.$route.meta.title
    },
    isshow() {
      return this.$route.meta.isshow
    },
    istabbar() {
      return this.$route.meta.istabbar
    },
  },
  watch: {
    $route(to, form) {
      switch (this.$route.fullPath) {
        case '/index':
          this.active = 0
          break
        case '/piazza':
          this.active = 1
          break
        case '/chat/list':
          this.active = 2

          break
        case '/my':
          this.active = 3

          break

        default:
          break
      }
    },
  },
  async mounted() {
    location.initMap('map-container')
    // 判断localStorage中是否已经存储了唯一标识符，如果没有则生成一个
    //每次请求都判断当前的uuid和app_key是否存在
    if (!this.$store.state.did || !this.$store.state.app_key || JSON.stringify(this.$store.state.userInfo) == "{ uid: '' }") {
      await generateUUID()
      this.$router.push({ path: '/Login' })
    }
  },
  methods: {
    goPage(e) {
      console.log(this.$route, this)
      this.$router.push({
        path: e,
        query: {
          id: this.$route.query.id,
        },
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    closeReviewPop() { },
  },
}
</script>

<style lang="scss">
/**
 * 适配 iphone 底部安全区（指示条，配合index.html <meta name="viewport" ... />使用
 */
@supports (bottom: env(safe-area-inset-bottom)) {
  #app {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.van-nav-bar__content {
  background: rgba(255, 255, 255, 0);
}

.van-nav-bar {
  background: #00000000 !important;
}

.van-hairline--bottom::after {
  border: 0px !important;
}
</style>
